<template>
  <view class="login-page">
    <view class="login-header">
      <image class="login-logo" src="/static/images/1751422720515.jpg" mode="aspectFit"></image>
      <view class="login-title">欢迎登录颐养健康中心</view>
      <view class="login-tip">请使用您的账号和密码登录系统</view>
    </view>
    <view class="login-form">
      <input class="login-input" v-model="username" placeholder="请输入账号" />
      <input class="login-input" v-model="password" type="password" placeholder="请输入密码" />
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
import { login, setToken } from '@/api/user.js'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({ title: '请输入账号和密码', icon: 'none' });
        return;
      }
      try {
        // 调用后端接口
        const res = await login({
          username: this.username,
          password: this.password,
          role: 2
        });
        // 假设后端返回 { code: 1000, data: userId, msg: '1' }
        let userId = res;
        // 兼容后端返回格式
        if (res && typeof res === 'object' && 'data' in res) {
          userId = res.data;
        }
        uni.setStorageSync('isLogin', true);
        uni.setStorageSync('userId', userId); // 可存储用户id
        // 记录token
        await setToken(userId);
        
        uni.showToast({ title: '登录成功', icon: 'success' });
        setTimeout(() => {
          uni.reLaunch({ url: '/pages/home/home' });
        }, 500);
      } catch (err) {
        // 假设后端返回 { code: 非1000, message: '账号或密码错误！' }
        uni.showToast({ title: err.message || '登录失败', icon: 'none' });
      }
    }
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
}
.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
.login-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(91,184,172,0.10);
}
.login-title {
  font-size: 22px;
  font-weight: bold;
  color: #5bb8ac;
  margin-bottom: 8px;
}
.login-tip {
  font-size: 15px;
  color: #888;
  margin-bottom: 10px;
}
.login-form {
  width: 80%;
  max-width: 350px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(91,184,172,0.08);
  padding: 30px 20px 24px 20px;
  display: flex;
  flex-direction: column;
}
.login-input {
  height: 44px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 0 12px;
  font-size: 16px;
  background: #fafafa;
}
.login-btn {
  background: #5bb8ac;
  color: #fff;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  width: 120px;
  height: 44px;
  margin-top: 10px;
}
</style>
